import React, { useState, useEffect } from 'react';
import { Layout, Button } from '@douyinfe/semi-ui';
import Polaris from '../../components/skyPlotPage/Polaris';
import satelliteService from '../../services/satelliteService';

const { Header, Footer, Sider, Content } = Layout;

const SkyPlotPage = () => {
  // 1. 初始化状态
  const [satelliteData, setSatelliteData] = useState([]);
  const [previousSatelliteData, setPreviousSatelliteData] = useState([]); // 新增：保存上一次数据
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [lastUpdated, setLastUpdated] = useState(new Date()); // 新增：最后更新时间状态
  const [isFirstLoad, setIsFirstLoad] = useState(true); // 跟踪是否首次加载

  // 2. 在组件挂载时获取数据并设置定时器
  useEffect(() => {
    fetchSkyPlotData(); // 立即获取一次数据
    
    // 设置每秒自动更新的定时器
    const intervalId = setInterval(() => {
      fetchSkyPlotData();
    }, 1000); // 1000毫秒 = 1秒
    
    // 组件卸载时清除定时器
    return () => {
      clearInterval(intervalId);
    };
  }, []);

  // 3. 新增获取数据的函数
  const fetchSkyPlotData = async () => {
    if (satelliteData.length > 0) {
      // 如果已有数据，不是首次加载，则不再显示加载中画面
      setIsFirstLoad(false);
    }
    setLoading(true);
    setError(null);
    try {
      // 调用API获取数据
      const data = await satelliteService.getSkyPlotData();
      
      // 比较数据变化（如果不是首次加载）
      if (!isFirstLoad && previousSatelliteData.length > 0 && satelliteData.length > 0) {
        compareDataChanges(satelliteData, data);
      }
      
      // console.log('获取到的天空图数据:', data);
      // 先保存当前数据为上一次数据
      setPreviousSatelliteData(satelliteData);
      setSatelliteData(data);
      // console.log(data);
      setLastUpdated(new Date()); // 更新最后更新时间
      setIsFirstLoad(false); // 首次加载完成后设为false
    } catch (err) {
      setError('获取天空图数据失败');
      console.error('获取天空图数据错误:', err);
    } finally {
      setLoading(false);
    }
  };

  // 新增：比较数据变化的函数
  const compareDataChanges = (oldData, newData) => {
    // 创建旧数据的ID-system映射
    const oldDataMap = new Map();
    oldData.forEach(sat => {
      // 使用system和id的组合作为唯一标识
      const key = `${sat.system}-${sat.id}`;
      oldDataMap.set(key, sat);
    });
    
    // 创建新数据的ID-system映射
    const newDataMap = new Map();
    newData.forEach(sat => {
      const key = `${sat.system}-${sat.id}`;
      newDataMap.set(key, sat);
    });
    
    // 找出被移除的数据
    const removedData = [];
    oldDataMap.forEach((value, key) => {
      if (!newDataMap.has(key)) {
        removedData.push(value);
      }
    });
    
    // 找出新增的数据
    const addedData = [];
    newDataMap.forEach((value, key) => {
      if (!oldDataMap.has(key)) {
        addedData.push(value);
      }
    });
    
    // 在控制台输出变化信息
    if (addedData.length > 0 || removedData.length > 0) {
      console.log('=== 卫星数据变化 ===');
      
      if (addedData.length > 0) {
        console.log(`新增 ${addedData.length} 颗卫星:`);
        addedData.forEach(sat => {
          console.log(`  - ${sat.system}: ${sat.id}`);
        });
      }
      
      if (removedData.length > 0) {
        console.log(`移除 ${removedData.length} 颗卫星:`);
        removedData.forEach(sat => {
          console.log(`  - ${sat.system}: ${sat.id}`);
        });
      }
      
      console.log('====================');
    }
  };

  // 4. 修改刷新数据方法
  const handleRefreshData = () => {
    fetchSkyPlotData();
  };

  // 5. 修改渲染逻辑
  return (
    <Layout style={{ height: '100%', width: '100%' , background: 'rgba(0, 0, 0, 0.3)',}}>
      <Sider style={{ width: '320px', height: '100%', background: 'var(--semi-color-fill-2)', padding: '20px', display: 'flex', flexDirection: 'column' }}>
        {/* <h3>控制面板</h3>
        <p>这里可以放置卫星列表、筛选器等控件。</p> */}
        {/* 显示最后更新时间 */}
        {/* <p style={{ fontSize: '12px', color: '#666', marginTop: '10px' }}>
            最后更新: {`${lastUpdated.getHours().toString().padStart(2, '0')}:${lastUpdated.getMinutes().toString().padStart(2, '0')}:${lastUpdated.getSeconds().toString().padStart(2, '0')}`}
        </p> */}
        <Button 
          theme="solid" 
          type="primary" 
          onClick={handleRefreshData} 
          style={{ marginTop: '20px' }}
          loading={loading}
        >
          刷新数据
        </Button>
        {/* {error && <p style={{ color: 'red', marginTop: '10px' }}>{error}</p>} */}
      </Sider>
      <Content style={{ height: '100%', padding: '0', background: 'transparent' }}>
        {isFirstLoad && loading ? (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
            <p>加载中...</p>
          </div>
        ) : error ? (
          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
            <p style={{ color: 'red' }}>{error}</p>
          </div>
        ) : (
          <Polaris data={Array.isArray(satelliteData) ? satelliteData : []} />
        )}
      </Content>
      {/* <Sider style={{ width: '320px', background: 'var(--semi-color-fill-2)' }}>
         <p style={{padding: '20px'}}>这里可以显示选中卫星的详细信息。</p>
      </Sider> */}
    </Layout>
  );
};

export default SkyPlotPage;